<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <title>ECharts</title>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width: auto;height:600px;"></div>
	<!-- 引入 echarts.js -->
	<script src="echarts2.js"></script>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '环境温度监控'
            },
			legend: {
                data:['销量']
            },
			color:[
				'#f00','#c23531','#2f4554',  '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'
			],
            xAxis: {
                data: [],
				axisLine:{
					symbol:['none','arrow']
				},
				boundaryGap :false,//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
            },
            yAxis: {
				axisLabel: {
					formatter:'{value}℃'
				},
				axisLine:{
					symbol:['none','arrow']
				}
			},
			tooltip:{
				show:true,
				trigger:'axis',
				formatter:'时间：{b}<br> 温度：{c}℃',
				axisPointer: {
					type: 'cross',
					animation: true,
					label: {
						precision:1,
						//formatter:'{value}℃',
						formatter:{
							axisDimension:'x'
						},
						backgroundColor: '#ccc',//ccc
						borderColor: '#aaa',//aaa
						borderWidth: 1,
						shadowBlur: 0,
						shadowOffsetX: 0,
						shadowOffsetY: 0,

						color: '#222'//222
					}
				},
			},
            series: [
				{
					name: '销量',
					type: 'line',
				
					
					label: {
						/*normal: {//normal 是图形在默认状态下的样式
							show: true,
							position: 'top'
						},
						emphasis: {//emphasis 是图形在高亮状态下的样式
							show: false,
							//textStyle: {
								fontSize: '25',
								fontWeight: 'bold'
							//}
						}*/
						show:false,
						color:'#eee',
						position: 'top',
						fontSize: '25',
						
					},
					lineStyle:{
						width:3,//系列的宽度
					},
					
					data: []
				}
			]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

		// 异步加载数据
		$.get('http://hb.hbjc2018.cn/api/hbjc/myApi/getTemp').done(function (data) {
			// 填入数据
			myChart.setOption({
				xAxis: {
					data: data.time
				},
				series: [{
					// 根据名字对应到相应的系列
					name: '销量',
					data: data.temp
				}]
			});
		});
    </script>
</body>
</html>